<template>  
  <div class="main-body" :style="{'-webkit-overflow-scrolling': scrollMode}">  
    <div class="goods-list">
      <v-loadmore :top-method="loadTop" :bottom-method="loadBottom" ref="loadmore" :auto-fill="false">  
        <div class="oh">
          <div class="block media-item" v-for="(item, ind) in goodsList" :key="ind">
            <span class="collection" :class="goodsColSta(item.goodsId)" @click="goodsCol(ind)">
              <i class="fa fa-heart"></i>
            </span>
            <router-link :to="{path: '/goodsDetail/' + item.goodsId, params: { gid: item.goodsId}}">
              <div class="img">
                <img :src="apiUrl + item.goodsLogo" alt="">
              </div>
              <div class="title">{{ item.goodsName }}</div>
              <div class="price"><div class="hot">&yen;{{ item.goodsPrice }}</div><div class="old">&yen;{{ item.marketPrice }}</div></div>
              <div class="sales">已销售：<span class="hot">{{ item.saleCount }}</span> 件</div>
            </router-link>
          </div>
        </div>
      </v-loadmore>
    </div>
  </div>  
</template>  
<script>  
  import {Loadmore} from 'mint-ui';  
  export default {  
    data:function() {  
      return {   
        goodsList:[],
        apiUrl: "",
        p: 1,
        total: 1,
        allLoaded: false, //是否可以上拉属性，false可以上拉，true为禁止上拉，就是不让往上划加载数据了  
        scrollMode:"auto", //移动端弹性滚动效果，touch为弹性滚动，auto是非弹性滚动  
        colItems: []
      }  
    },
    components: {  
      'v-loadmore':Loadmore  // 为组件起别名，vue转换template标签时不会区分大小写，例如：loadMore这种标签转换完就会变成loadmore，容易出现一些匹配问题  
                              // 推荐应用组件时用a-b形式起名  
    },
    mounted () {
      this.init();
      document.title = this.$route.meta.title;
      //this.clearItemStorange("goodsCollections");
      var getColItems = JSON.parse(this.getItemStorange("goodsCollections"));
      if(getColItems != null) {
        this.colItems = getColItems;
      }
    },
    methods: {
      loadTop () {
        this.init();
      },
      loadBottom () {
        if(this.goodsList.length > 5) {
          this.addItem();
        }
      },
      goodsColSta (id) {
        var colItems = this.colItems;
        for(var i = 0; i < colItems.length; i++) {
          var colId = parseInt(colItems[i].goodsId);
          if(parseInt(id) === colId) {
            return "selected";
          }
        };
      },
      pageListLen () {
        let len = this.goodsList;
        if(len === undefined) {
          return 1;
        } else {
          return this.goodsList.length;
        }  
      },
      init(type) {
        let me = this;
        this.IndicatorOpen();
        this.axiosReq().get(me.baseUrl() + "/product/index")
        .then(function (res) {
          me.goodsList = [];
          me.apiUrl = res.data.apiUrl;
          me.goodsList = res.data.dataList;
          me.p = me.p + 1;
          me.total = res.data.page.total;
          me.Indicator.close();
          me.$refs.loadmore.onTopLoaded();
        })
        .catch(function (error) {
          me.Toast('页面加载失败');
          me.Indicator.close();
        });
      },
      addItem () {
        let me = this;
        if(me.p > me.total) {
          me.Toast('暂无更多数据');
          me.$refs.loadmore.onBottomLoaded();
          return;
        }
        this.IndicatorOpen();
        this.axiosReq().get(me.baseUrl() + "/product/index", {
          params: {
            p: me.p
          }
        })
        .then(function (res) {
          if(res.data.status === 200) {
            me.apiUrl = res.data.apiUrl;
            for(var i = 0; i < res.data.dataList.length; i++) {
              me.goodsList.push(res.data.dataList[i]);
            }
            me.p = me.p + 1;
          } else {
            me.Toast('页面加载失败');
          }
          me.total = res.data.page.total;
          me.Indicator.close();
          me.$refs.loadmore.onBottomLoaded();
        })
        .catch(function (error) {
          me.Toast('页面加载失败');
          me.Indicator.close();
        });
      },
      goodsCol (ind) {
        if(this.colItems.length >= 20) {
          this.Toast('收藏不能超过2条');
          return;
        }
        if(!this.colCondi(ind)) {
          this.goodsList[ind].colSta = true;
          this.colItems.push(this.goodsList[ind]);
          this.setItemStorange("goodsCollections", JSON.stringify(this.colItems));
          this.Toast('收藏成功');
        } else {
          this.Toast('您已收藏');
        }
      },
      colCondi (ind) {
        var gId = parseInt(this.goodsList[ind].goodsId);
        var sta = false;
        for(var i = 0; i < this.colItems.length; i++) {
          var colId = parseInt(this.colItems[i].goodsId);
          if(gId === colId) {
            sta = true;
            break;
          }
        }
        return sta;
      }
    }
  }  
</script>

<style scoped lang="less">
  @import url('../../../static/var');

  .media-item {
    width: 45.5%;
    padding: 2%;
    margin-right: 1%;
    margin-bottom: 1%;
    height: auto;
    float: left;
    border-bottom: 1px solid #eee;
    text-align: center;
    overflow: hidden;
    position: relative;
    &:nth-of-type(2n) {
      margin-right: 0;
    }
    a {
      overflow: hidden;
      color: @col-333;
      text-decoration: none;
    }
    .img {
      padding: 50%;
      position: relative;
      img {
        width: 100%;
        .position(absolute, 0, 0, auto, 0);
      }
    }
    .title {
      .breakTxt;
      margin: 10px 0;
    }
    .price {
      margin-bottom: 5px;
      div {
        width: 50%;
        display: inline-block;
      }
      .hot {
        color: @col-orange;
      }
      .old {
        color: @col-92;
        text-decoration: line-through;
      }
    }
    .sales {
      color: @col-92;
      .hot {
        color: @col-333;
      }
    }
    .collection {
      display: inline-block;
      .box(30px, 30px);
      .position(absolute, 10px, 10px, auto, auto);
      z-index: 100;
      i {
        font-size: @f18;
        color: @col-c8;
      }
      &.selected i {
        color: @col-orange;
      }
    }
  }
</style>